<template>
	<view class="edit_nick">
		<view class="form">
			<i-formItem title="昵称">
				<input v-model="nickName" type="text" placeholder="请输入昵称" maxlength="20">
			</i-formItem>
			<view style="height: 64rpx;"></view>
			<i-buttons padding="18rpx 0" radius="4" size="32" color="#fff" bgColor="#FB652E" @click="edit">保存
			</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import useStore from '../../stores/index'
	import {
		editUserInfo
	} from '../../api/user'
	import {
		ref
	} from 'vue-demi';
	import {
		navTo,
		showTost
	} from '../../utils/common';
	const store = useStore()
	const nickName = ref('')
	nickName.value = store.userInfo.nickName
	const edit = async () => {
		if (!nickName.value) {
			uni.showToast({
				icon: 'none',
				title: '请输入昵称'
			})
			return
		}
		if (/\s/.test(nickName.value)) {
			uni.showToast({
				icon: 'none',
				title: '昵称不能包含空格字符'
			})
			return
		}
		
		await editUserInfo({
			nickName: nickName.value
		})
		showTost('昵称修改成功', () => {
			navTo('', 'navigateBack')
		})
		store.setUserInfo()
	}
</script>

<style lang="scss" scoped>
	.edit_nick {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.form {
			width: calc(100% - 64rpx);
			margin: 0 auto;

			input {
				width: 75%;
			}
		}
	}
</style>
